<template>
	<div id="conf-module-container-cameras" class="conf-module-container-cameras" :style="styleValue">
		<div class="conf-module-main">
			<div ref="refConfModuleHeader" class="conf-module-header">
				<div class="conf-module-header-title">
					<slot name="Slot-Conf-Module-Header" extra="页面的标题等"></slot>
				</div>

				<div v-if="props.showPageTools" class="conf-module-tools">
					<slot name="Slot-Conf-Module-Tools-Left" extra="页面的筛序组件和按钮等"></slot>

					<slot name="Slot-Conf-Module-Tools-Right" extra="页面的筛序组件和按钮等"></slot>
				</div>
			</div>

			<div ref="refConfModuleContent" class="conf-module-content-cameras">
				<div class="_container">
					<vue-scroll @handle-scroll="handleScroll">
						<slot name="Slot-Conf-Module-Left" extra="页面的具体内容等"></slot>
					</vue-scroll>
				</div>
				<div class="_table">
					<vue-scroll @handle-scroll="handleScroll">
						<slot name="Slot-Conf-Module-Right" extra="页面的具体内容等"></slot>
					</vue-scroll>
					<div style="position: absolute; bottom: 0; width: 100%">
						<slot name="Slot-Table-Batch-Operation" extra=""></slot>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="ConfModuleContainerCameras">
interface TsProps {
	showPageTools?: boolean;
}

const props = withDefaults(defineProps<TsProps>(), {
	showPageTools: false
});

const styleValue = reactive({
	'--header-height': '76px',
	'--main-height': '0px',
	'--border-bottom': '1px solid transparent'
});

const refConfModuleHeader = ref(null);
const refConfModuleContent = ref(null);

const handleScroll = (vertical: Record<string, any>): void => {
	styleValue['--border-bottom'] = vertical.scrollTop > 5 ? '1px solid rgba(211, 211, 211, 0.2)' : '1px solid transparent';
};

defineExpose({
	styleValue
});

onMounted(() => {
	let observer = new ResizeObserver((entries) => {
		styleValue['--header-height'] = (entries[0].target as HTMLDivElement).offsetHeight + 'px';

		nextTick(() => {
			if (refConfModuleContent.value) {
				styleValue['--main-height'] = (refConfModuleContent.value as HTMLDivElement).offsetHeight + 'px';
			}
		});
	});

	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
	observer.observe(refConfModuleHeader.value!);
});
</script>

<style lang="less" scoped>
.conf-module-container-cameras {
	width: 100%;
	height: 100%;
	padding: 24px 16px;

	.conf-module-main {
		width: 100%;
		height: 100%;
		border: 1px solid @borderColor01;
		border-radius: 8px;
		background: rgba(8, 22, 59, 0.4);

		.conf-module-header {
			border-bottom: var(--border-bottom);

			.conf-module-header-title {
				display: flex;
				align-items: center;
				height: 76px;
				padding: 20px 32px;
			}

			.conf-module-tools {
				// display: flex;
				align-items: center;
				justify-content: space-between;
				min-height: 44px;
				padding: 4px 32px;
			}
		}

		.conf-module-content-cameras {
			display: flex;
			width: 100%;
			// 减去的 1px 是顶部在页面处于滚动的情况下,出现的borderBottom宽度
			height: calc(100% - var(--header-height));

			._container {
				overflow: hidden;
				min-width: 274px !important;
				// max-width: 340px !important;
				// width: 100%;
				border: 1px solid @mask02 !important;
				border-right: 1px solid @mask02;
				padding: 0 16px;
			}

			._table {
				flex: 1;
				position: relative;
			}
		}
	}
}
</style>
